import { createUseStyles } from "react-jss";

type ClassNames = "nav" | "ul";
const useStyles = createUseStyles<ClassNames>({
  nav: {
    textAlign: "center",

    "& button": {
      margin: ".25rem"
    }
  },
  ul: {
    listStyle: "none",
    whiteSpace: "nowrap",
    paddingInlineStart: 20,
    overflow: "hidden",

    "& li": {
      display: "inline",
      padding: ".5rem",

      "& img": {
        padding: 10,
        transition: "background 0.2s linear"
      },

      "& .active": {
        backgroundColor: "rgba(0, 100, 150, 0.4)"
      }
    }
  }
});

export default useStyles;
